<template>
    <!-- 往届学员 -->
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <em class="el-icon-lx-calendar"></em>往届学员 </el-breadcrumb-item>
                <el-breadcrumb-item>信息查看</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 搜索表单 -->
            <div class="form-box">
                <el-form ref="form" :model="query" label-width="80px" class="findform">
                    <el-form-item label="所在城市" class="findinput">
                        <el-input style="width: 200px" placeholder="请输入" v-model="query.city" clearable> </el-input>
                    </el-form-item>
                    <el-form-item label="薪资" class="findinput">
                        <el-select v-model="query.salary" placeholder="请选择" clearable>
                            <div v-for="(item, index) in salaryList" :key="index">
                                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form>
            </div>
            <a href=" "></a>
            <!-- 表格 -->
            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(50,65,87)"
                :data="tableData"
                border
                stripe
                height="393"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                :row-style="{height: '70px'}"
            >
                <el-table-column prop="name" label="姓名" width="150" align="center"> </el-table-column>
                <el-table-column prop="school" label="来源" align="center"></el-table-column>
                <el-table-column prop="city" label="所在城市" align="center"></el-table-column>
                <el-table-column prop="company" label="公司名称" align="center"></el-table-column>
                <el-table-column prop="salary" label="薪资" align="center">
                    <template slot-scope="scope">￥{{ scope.row.salary }}</template>
                </el-table-column>
                <el-table-column prop="enddate" label="毕业时间" align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination" v-if="pageTotal != 0">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { countoldstuinfo, oldstuinfo, oldstuinfobyquery, countoldstuinfobyquery } from '../../api/index';
export default {
    name: 'oldstu',
    mounted: function () {
        this.findOldStuInfo();
    },
    data() {
        return {
            query: {
                city: '', //学生姓名
                salary: '', //薪资
                pageIndex: 1,
                pageSize: 5
            },
            pageTotal: 0,
            salaryList: [
                {
                    label: '8K以内',
                    value: '0-8000'
                },
                {
                    label: '8K-12k',
                    value: '8000-12000'
                },
                {
                    label: '12K-20k',
                    value: '12000-20000'
                },
                {
                    label: '20k-30K',
                    value: '20000-30000'
                }
            ],
            tableData: [],
            loading: true, //控制加载动画
            status: false //控制页面数据搜索方法，true为通过条件搜索
        };
    },
    methods: {
        /**
         * 搜索按钮事件
         */
        handleSearch() {
            this.query.pageIndex = 1;
            this.status = true;
            this.loading = true;
            if (this.query.city == '' && this.query.salary == '') {
                this.findOldStuInfo()
            } else {
                this.findOldStuInfoByQuery();
            }
        },
        /**
         * 分页导航
         */
        handlePageChange(val) {
            console.log('分页数：' + val);
            this.$set(this.query, 'pageIndex', val);
            this.loading = true;
            if (this.status) {
                this.findOldStuInfoByQuery();
            } else {
                this.findOldStuInfo();
            }
        },
        /**
         * 查询往届学员信息（不需要条件）
         */
        findOldStuInfo() {
            var that = this;
            // 查询记录的总条数
            countoldstuinfo().then((res) => {
                console.log('countoldstuinfo');
                console.log(res);
                that.pageTotal = res;
            });
            // 当前页的数据
            oldstuinfo(this.query).then((res) => {
                console.log('oldstuinfo');
                console.log(res);
                that.tableData = res;
                setTimeout(() => {
                    that.loading = false;
                }, 300);
            });
        },
        /**
         * 通过query对象查询往届学员信息
         */
        findOldStuInfoByQuery() {
            var that = this;
            that.tableData = []
            // 查询记录的总条数
            countoldstuinfobyquery(this.query).then((res) => {
                console.log('countoldstuinfo');
                console.log(res);
                that.pageTotal = res;
            });
            // 当前页的数据
            oldstuinfobyquery(this.query).then((res) => {
                console.log('oldstuinfobyquery');
                console.log(res);
                if (res == '查无结果') {
                    this.$message.error('暂无记录');
                } else {
                    that.tableData = res;
                }
                setTimeout(() => {
                    that.loading = false;
                }, 500);
            });
        }
    }
};
</script>

<style scoped>
.form-box {
    width: 100%;
}
.findform {
    width: 60%;
    margin: 0 auto;
}
.findinput {
    float: left;
    padding-right: 10px;
}
</style>